<template>
<div class="app-container">
  <div class="">
    <div slot="header" class="clearfix job-tab-header">
    </div>
    <div>
      <el-form :rules="rules" ref="targetForm" :model="temp" label-width="100px" label-position='left' size="small">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="temp.name" style="width:63%" placeholder="角色名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色代码" prop="code">
            <el-input v-model="temp.code" style="width:63%"  placeholder="角色代码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="角色状态" prop="status">
            <el-select v-model="temp.status" clearable>
              <el-option v-for="item in  statusOptions" :key="item.key" :label="item.display_name" :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属子系统" prop="subsysid">
            <el-select v-model="temp.subsysid" clearable @focus="editSubSystemsOptions">
              <el-option v-for="item in subSystemsOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="所属部门" prop="orgId">
              <el-input v-model="belongOrgName" placeholder="所属部门" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="small" type="primary" @click="handleCreate()">设置</el-button>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色描述" prop="description">
              <el-input type="textarea" v-model="temp.description" style="width:85%" placeholder="角色描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      <el-row :gutter="5" style="border-top:1px solid #e6e6e6; padding-top:20px;">
        <el-col style="text-align: right;">
          <el-button size="small" class="filter-item" type="primary" @click="saveData">保存</el-button>
          <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
        </el-col>
      </el-row>
      </el-form>
    </div>
  </div>
    <!--所属部门设置-->
    <el-dialog
      v-if="dialogVisiblebelongOrg"
      append-to-body
      top="0"
      :close-on-click-modal="false"
      title="设置所属部门"
      :visible.sync="dialogVisiblebelongOrg"
      width="30%">
      <belongOrg :belongData="belongData" @changeOrgCloseDialog="changeOrgCloseDialog" @setOrg="changeOrg($event)"></belongOrg>
    </el-dialog>
</div>
</template>

<script>
import belongOrg from '@/views/systemManage/commonComponents/orgSetting/belongOrg'
import {
  orgTreeSelect
} from '@/api/service'
import {
  updateItem,
  compositeSelect,
  selectSysSubsys,
  selectExit
} from '@/api/systemManage/roleManagementEdit'
import {
  statusOptions,
  isInnerOption
} from '@/utils/allOptions'
export default {
  name: 'editRole',
  components: {
    belongOrg
  },
  props: ['roleFormData'],
  data() {
    var checkCode = (rule, value, callback) => {
    if (this.code != value) {
        const query = {
          condition:{
            code: {
              property: 'code',
              value: value,
              type: 'EQ'
            }
          }
        }
        selectExit(query).then(response => {
          const records = response.data.data.records
          setTimeout(() => {
            if (response.data.data.count > 0) {
              callback(new Error('角色代码已经存在，请重新输入'));
            } else {
              callback();
            }
          }, 1000);
        })
      } else {
        callback();
      }
    }
    return {
      dialogVisiblebelongOrg: false,
      statusOptions,
      belongOrgName: '',
      subSystemsOptions: [],
      belongData: [],
      code: '',
      temp: {
        name: '',
        subsysid: '',
        status: '',
        orgId: '',
        code: '',
        description: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        }
        ],
        code: [{
          required: true,
          message: '请输入角色代码',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        },
        {
          validator: checkCode,
          trigger: 'blur'
        }
        ],
        status: [{
          required: true,
          message: '请选择是否有效',
          trigger: 'blur'
        }],
        isInner: [{
          required: true,
          message: '请选择是否内置角色',
          trigger: 'blur'
        }],
        subsysid:[{
        message: '所属子系统不能为空',
        required: true,
        trigger: 'change'
        }]
      },
      isInnerOption,
      orgTree: {
        condition: [
          {
            property: 'id',
            value: '',
            type: 'EQ'
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const roleInfo = this.roleFormData
      if (roleInfo.orgId !== ''&& roleInfo.orgId !== null) {
        orgTreeSelect({ condition: [
          {
            'property': 'id',
            'value': roleInfo.orgId,
            'type': 'EQ'
          }
        ] }).then(response => {
            this.belongOrgName = response.data.data.records[0].name
            this.belongData.belongOrgId = roleInfo.orgId
            this.belongData.belongOrgName = this.belongOrgName
          })
      } else {
        this.belongOrgName = ''
      }
    },
    closeSelf() {
      this.$emit('changeCloseDialog')
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          // this.temp.password = this.$route.params.id
          updateItem(this.roleFormData.id, this.temp).then((res) => {
            if (res.statusCode !== 200) {
              this.$notify({
                title: '失败',
                message: '更新失败',
                type: 'error',
                duration: 2000
              })
            }
            this.resetAll()
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
            this.$emit('changeCloseDialog')
            // this.$router.push({ name: 'roleManagement' })
          })
        }
      })
    },
    resetAll() {
      this.temp = {
        name: '',
        status: '',
        orgId: ''
      }
      this.$refs.targetForm.clearValidate()
    },
    editSubSystemsOptions() {
      const query = {
        sort: [{
          direction: 'ASC',
          property: 'id'
        }]
      }

      selectSysSubsys(query).then(response => {
        const records = response.data.data.records
        if (response.data.data.count > 0) {
          this.subSystemsOptions = []
          for (const item of records) {
            const input = {}
            input.id = item.id
            input.name = item.name
            this.subSystemsOptions.push(input)
          }
        }
      })
    },
    handleCreate() {
      this.dialogVisiblebelongOrg = true
    },
    changeOrgCloseDialog() {
      this.dialogVisiblebelongOrg = false
    },
    changeOrg(data) {
      this.belongData = data
      this.temp.orgId = data.orgId
      this.belongOrgName = data.orgName
    }
  },
  mounted() {
    const roleInfo = this.roleFormData
    if (roleInfo) {
      this.temp.code = roleInfo.code
      this.temp.name = roleInfo.name
      this.temp.status = roleInfo.status
      this.temp.subsysid = roleInfo.subsysid
      this.temp.orgId = roleInfo.orgId
      this.temp.description = roleInfo.description
      this.code = roleInfo.code
    }
    this.editSubSystemsOptions()
  }
}
</script>

